/*
 * @Author: xiaosihan 
 * @Date: 2021-04-24 22:35:27 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-11-07 13:57:12
 */

import { mousePosition } from "@pages/XshReactThreeDemo/XshReactThreeDemoStore";
import React from "react";
import * as THREE from "three";
import { Texture } from "three";
import { Group3D, Line, Line2, LineSegments, LineSegments2, Mesh, Points, RaycasterMesh } from "xsh-react-three";
import MyController from "../MyController/MyController";
import pointArray, { BuffGeotrys } from "./pointArray";
import pointsMap from "./reactIcon.png";
import roadPNG from "./road1.png";


interface Props { }

interface State {
    pointsIndex: number,
    reactIconTexture?: Texture;
}

export default class LineDemo extends Group3D<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    state: State = {
        pointsIndex: 0,
        reactIconTexture: undefined
    };


    async componentDidMount() {
        const { textureLoader } = this.context;

        const reactIconTexture = textureLoader.load(roadPNG);

        Object.assign(reactIconTexture, {
            wrapS: THREE.RepeatWrapping,
            wrapT: THREE.RepeatWrapping,
            version: 2
        });

        await this.setState({ reactIconTexture });
    }

    beforeRender() {
        if (this.state.reactIconTexture) {
            this.state.reactIconTexture.offset.x -= 0.005;
        }
    }

    componentWillUnmount() {
        if (this.state.reactIconTexture) {
            this.state.reactIconTexture.dispose();
        }
    }

    render() {

        const { pointsIndex, reactIconTexture } = this.state;

        return (
            <>

                {/* 控制器和相机 */}
                <MyController />

                <Points
                    position={{ x: 1, y: 0, z: -5 }}
                    map={pointsMap}
                    size={4}
                    points={pointArray[pointsIndex]}
                    sizeAttenuation={true}
                    blending={true}
                    color={"#fff"}
                    alphaMap={undefined}
                    alphaTest={0.1}
                    depthTest={true}
                    depthWrite={true}
                    opacity={1}
                    duration={500}
                />

                <Line
                    points={pointArray[pointsIndex]}
                    color={["#f00", "#00f"]} // 线条的颜色
                    opacity={1} // 透明度
                    dashSize={1}// 虚线长度
                    gapSize={0.1} // 虚线间隔
                    dashOffset={0.5} // 虚线位移调整
                    dashSpeed={1} // 虚线流动速度
                    position={{ x: 1, y: 0, z: 1 }}
                    duration={500}
                />

                <LineSegments
                    points={pointArray[pointsIndex]}
                    color={["#f00", "#00f"]} // 线条的颜色
                    opacity={1} // 透明度
                    dashSize={1}// 虚线长度
                    gapSize={0.1} // 虚线间隔
                    dashOffset={0.5} // 虚线位移调整
                    dashSpeed={1} // 虚线流动速度
                    position={{ x: 1, y: 0, z: 3 }}
                    duration={500}
                />

                <Line2
                    points={pointArray[pointsIndex]}
                    color={["#f00", "#00f"]} // 线条的颜色
                    opacity={1} // 透明度
                    dashSize={0.1}// 虚线长度
                    gapSize={0.1} // 虚线间隔
                    dashOffset={0} // 虚线位移调整
                    dashSpeed={0.5} // 虚线流动速度
                    linewidth={3} // 线宽
                    position={{ x: 1, y: 0, z: 6 }}
                    duration={500}
                />

                <LineSegments2
                    points={pointArray[pointsIndex]}
                    color={["#f00", "#00f"]} // 线条的颜色
                    opacity={1} // 透明度
                    dashSize={0.1}// 虚线长度
                    gapSize={0.1} // 虚线间隔
                    dashOffset={0} // 虚线位移调整
                    dashSpeed={0.5} // 虚线流动速度
                    linewidth={3} // 线宽
                    position={{ x: 1, y: 0, z: 9 }}
                    duration={500}
                />

                {/* 射线拾取专用模型 */}
                <RaycasterMesh
                    position={{ x: -2, y: 0, z: 6 }}
                    scale={{ x: 1, y: 1, z: 1 }}
                    rotation={(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, object3d: THREE.Object3D) => {
                        return {
                            x: object3d.rotation.x + 0.02,
                            y: object3d.rotation.y + 0.02,
                            z: object3d.rotation.z + 0.02,
                        }
                    }}
                >
                    <Mesh
                        scale={{ x: 0.9, y: 0.9, z: 0.9 }}
                        geometry={BuffGeotrys[0]}
                        material="MeshPhysicalMaterial"
                        castShadow={true}
                        receiveShadow={true}
                        cursor="pointer"
                        onClick={() => {
                            this.setState({
                                pointsIndex: (pointsIndex + 1) % pointArray.length
                            });
                        }}
                        onMousemove={e => {
                            mousePosition.copy(e.point);
                        }}
                    />

                </RaycasterMesh>


            </>
        )
    }
}